<template>
  <!-- 视频播放 -->
  <VideoPlay :playurl="playurl" :picurl="picurl" />
  <!-- 视频详情 -->
  <VideoInfo />
  <!-- 相关推荐/评论 -->
  <VideoBottom />
</template>

<script lang="ts" setup>
import { useVideoPlayStore } from "@/stores/videoplay";
import { blooggerplay, blogger, wallpaper } from "@/api/videolist";
import { onMounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import VideoPlay from "./components/video-play.vue";
import VideoInfo from "./components/video-info.vue";
import VideoBottom from "./components/video-bottom.vue";

const route = useRoute();
const store = useVideoPlayStore();
const playurl = ref<string>("");
const picurl = ref<any>("");
const bloggerinit = async () => {
  let bloggerres = await blogger(route.query.bvid);
  let res = await blooggerplay(route.query.aid, route.query.cid);
  store.Bloggerres = bloggerres.data.data;
  playurl.value = res.data.data.durl[0].url;
};

picurl.value = route.query.pic;
onMounted(() => {
  bloggerinit();
});
watch(route, () => {
  window.location.reload();
});
</script>

<style lang="less" scoped>
.video-info {
  padding: 3vw 2vw;
  border-bottom: 1px solid #ddd;
  .title {
    font-size: 4vw;
    line-height: 6vw;
    margin: 3vw 0;
  }
  .author-info {
    display: flex;
    align-items: center;
    font-size: 3vw;
    color: #999;
    .author {
      flex: 1;
      .author-avatar {
        width: 5vw;
        height: 5vw;
        object-fit: cover;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 1vw;
        background: url(@/assets/images/loading.png) no-repeat center #e7e7e7;
      }

      .author-name {
        color: #212121;
      }
    }
    > span {
      margin: 0 2vw;
    }
    .iconfont {
      font-size: 5vw;
      color: #757575;
      margin-right: 2vw;
    }
  }
}
</style>
